<template>
	<l-page :page.sync="query1.pageNum" :page-size.sync="query1.pageSize" :total="query1.total" @getList="getGoodsList">
		<div slot="header">
			<l-back class="mb-[24px]" />
			<el-form ref="queryForm" :model="query1" :inline="true" label-width="90px">
				<el-form-item label="商品名称:">
					<el-input v-model.trim="query1.name" placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="申请状态:">
					<el-select v-model.trim="query1.auditStatus" placeholder="申请状态">
						<el-option label="全部" :value="undefined" />
						<el-option label="待审核" :value="0" />
						<el-option label="已拒绝" :value="2" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="page-search-btn">
						<el-button icon="el-icon-search" type="primary" @click="queryOne">搜索</el-button>
						<el-button icon="el-icon-refresh" type="primary" plain @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<el-tabs v-model="tabActive" class="tabs">
			<el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.label + `（${tabStatistics[item.key]}）`" :name="item.key"></el-tab-pane>
		</el-tabs>
		<el-table ref="goodsDown" v-loading="loading" stripe :data="list1" @sort-change="handleSortChange">
			<el-table-column :formatter="emptyToString" type="index" width="55" align="center" label="序号" />
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id" />
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" width="150px" prop="goods_name" show-overflow-tooltip>
				<template slot-scope="scope">
					<div class="goods-name-style">
						{{ scope.row.name }}
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片">
				<template slot-scope="scope">
					<el-image style="width: 60px; height: 60px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]"></el-image>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品类型" min-width="156">
				<template slot-scope="scope">
					{{ scope.row.topCategoryName + ' > ' + scope.row.categoryName }}
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品价格" prop="retailPrice" sortable min-width="120">
				<template slot-scope="scope">
					<div>{{ scope.row.retailPrice || 0 }}</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="供应价格" prop="supplyPrice" sortable min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="申请状态" prop="auditStatus">
				<template slot-scope="scope">
					<div v-if="scope.row.auditStatus == 0">待审核</div>
					<div v-if="scope.row.auditStatus == 2">已拒绝</div>
				</template>
			</el-table-column>
      <el-table-column :formatter="emptyToString" align="center" label="审批意见" prop="auditOpinion" sortable min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="申请时间" prop="createTime" min-width="156">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="操作" width="220" fixed="right">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button v-if="scope.row.auditStatus === 0" v-hasPermi="['mall:store-goods:audit-list']" type="primary" @click="del(scope.row, 2)">取消申请 </el-button>
						<el-button v-if="scope.row.auditStatus === 2" v-hasPermi="['mall:store-goods:audit-list']" type="primary" @click="anew(scope.row)">重新提交 </el-button>
						<el-button v-if="scope.row.auditStatus === 2" v-hasPermi="['mall:store-goods:audit-list']" type="danger" @click="del(scope.row, 1)">删除 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>
<script>
import { delStore, getStoreAudit } from '@/api/mall/goods';
import { listChild, listParent } from '@/api/mall/category';
import tableMixins from '@/mixins/table';
import dayjs from "dayjs";

export default {
	name: 'Lottery',
	mixins: [tableMixins],
	data() {
		return {
			tabActive: 'totalCount',
			tabData: [
				{
					label: '全部',
					name: null,
					key: 'totalCount',
				},
				{
					label: '审核中',
					name: 0,
					key: 'waitCount',
				},
				{
					label: '已拒绝',
					name: 2,
					key: 'refuseCount',
				},
			],
			tabStatistics: {
				auditAmount: 0,
				auditCount: 0,
				refuseAmount: 0,
				refuseCount: 0,
				totalCount: 0,
				waitAmount: 0,
				waitCount: 0,
			},
			props: {
				expandTrigger: 'click',
				lazy: true,
				lazyLoad(node, resolve) {
					const { level, value } = node;
					if (level === 0) {
						listParent().then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: false,
							}));
							resolve(nodes);
						});
					} else {
						listChild(value).then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: true,
							}));
							resolve(nodes);
						});
					}
				},
			},
			activeName: '2',
			title1: '',
			query1: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			query2: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			query3: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			stepNum: 0,

			loading: false,
			list1: [],

			list2: [],

			list3: [],
			disable: true,
			editForm: {},
			showFlag: false,
			ptId: '',
			type: 2,
			lotteryInfo: {},
			isClick: false,
			nextList: [],
			editType: '',
			ptSn: '',
		};
	},
	watch: {
		tabActive() {
			const item = this.tabData.find((item) => item.key === this.tabActive);
			this.query1.auditStatus = item.name;
			this.queryOne();
		},
	},
	created() {
		this.ptId = this.$route.query.id;
		this.getGoodsList();
		this.getStatisticsV2();
	},
	methods: {
    dayjs,
		getStatisticsV2() {
			this.$request.get('/mall/store-goods/queryAuditCount').then((res) => {
				this.tabStatistics = {
					totalCount: res.data[0],
					waitCount: res.data[1],
					refuseCount: res.data[2],
				};
			});
		},
		getTime(startTime, endTime) {
			this.query1.startTime = startTime;
			this.query1.endTime = endTime;
		},
		del(row, type) {
			let str;
			if (type == 1) {
				//删除
				str = '确定删除该申请吗?';
			} else {
				//取消
				str = '确定取消该申请吗?';
			}
			this.$confirm(str, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delStore(row.id).then((res) => {
						this.$message({
							type: 'success',
							message: '操作成功!',
						});
					});
					this.getGoodsList();
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消',
					});
				});
		},
		anew(value) {
			this.$router.push({
				path: '/goods/storeAddGoods?id=' + value.id,
			});
		},
		handleCategoryChange(value) {
			this.query1.categoryId = value[value.length - 1];
		},
		getPtPeriodsList() {
			queryPtPeriodsList({
				id: this.ptId,
			}).then((res) => {
				this.nextList = res.data;
				console.log(this.nextList);
			});
		},
		goRecord() {
			this.$router.push({
				path: '/marketing/groupRecord?id=' + this.ptId,
			});
		},

		upOneLevel() {
			this.$router.go(-1);
		},
		chagetable(tab, event) {
			this.type = this.activeName;
			this.getGoodsList();
		},
		getList1() {
			this.type = 2;
			this.getGoodsList();
		},
		getList2() {
			this.type = 0;
			this.getGoodsList();
		},
		getList3() {
			this.type = 1;
			this.getGoodsList();
		},

		resetQuery() {
			this.query1 = {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			};
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.queryOne();
		},
		queryOne() {
			this.getGoodsList();
		},
		getGoodsList() {
			this.loading = true;
			let obj;
			getStoreAudit(this.query1).then((response) => {
				this.loading = false;
				this.$set(this.query1, 'total', Number(response.data.total));
				this.list1 = response.data.records;
			});
		},
		getLotteryDetail() {
			getLotteryDetailInfo({
				ptId: this.ptId,
			}).then((response) => {
				this.lotteryInfo = response.data;
				this.cont1 = response.data.win;
				this.cont2 = response.data.selected;
				this.cont3 = response.data.loser;
			});
		},
	},
};
</script>

<style scoped lang="scss">
.el-form--inline .el-form-item {
	margin-right: 40px;
	margin-bottom: 10px !important;
}

.scroll {
	//width: 1820px;
	margin-top: 20px;
	height: 170px;
	//padding: 20px;
	display: flex;
	//margin-left:24px ;
	overflow-x: auto;
	//overflow-y: hidden;
	.box {
		border: 1px dashed transparent;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
		width: 370px;
		height: 144px;
		border-radius: 10px;
		padding: 13px 16px 16px;
		font-size: 12px;
		box-sizing: border-box;
		display: inline-block;
		flex-shrink: 0;
		margin-right: 24px;

		.time {
			display: flex;
			justify-content: space-between;
			margin-top: 8px;

			.label {
				color: #333333;
				font-size: 12px;
				line-height: 36px;
			}

			.times {
				width: 240px;
				height: 36px;
				background: #f7f7f7;
				opacity: 1;
				border-radius: 4px;
				color: #333333;
				font-size: 14px;
				padding-left: 12px;
				box-sizing: border-box;
				line-height: 36px;
			}
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;

			.expect {
				span {
					color: #f14a46;
					padding-left: 68px;
				}
			}

			.btn {
				width: 52px;
				height: 22px;
				padding: 0;
				text-align: center;
			}
		}
	}
}

.btn-return {
	width: 92px;
	height: 30px;
	background: #6373ee;
	opacity: 1;
	border-radius: 20px;
	display: flex;
	color: #ffffff;
	font-size: 14px;
	line-height: 30px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;

	img {
		display: block;
		width: 15px;
		flex-shrink: 0;
		height: 14px;
		margin-right: 6px;
	}
}

.pagination-container {
	padding: 32px 16px !important;
}

.tabs {
	margin-top: 10px;

	.cancel-btn {
		width: 72px;
		height: 30px;
		background: #6373ee;
		opacity: 1;
		line-height: 30px;
		font-size: 12px;
		color: #ffffff;
		text-align: center;
		border-radius: 2px;
		margin-bottom: 10px;
		cursor: pointer;
	}
}

.container {
	padding: 24px;
	min-height: 100vh;
	background: #fff;

	.info {
		.set-btn {
			width: 110px;
			height: 36px;
			background: #1a2483;
			border-radius: 5px;
			opacity: 1;
			font-size: 12px;
			margin-top: 95px;
			color: #ffffff;
			cursor: pointer;
			text-align: center;
			font-weight: 900;
			line-height: 6px;
		}

		.msg {
			height: 36px;
			line-height: 36px;
			font-size: 12px;
			display: flex;
			margin-bottom: 10px;

			.label {
				width: 100px;
				text-align: left;
			}

			.text {
				width: 156px;
				height: 36px;

				color: #f14a46;
				padding-left: 20px;
				box-sizing: border-box;
				opacity: 1;
				border-radius: 4px;
			}

			.text2 {
				background: #f7f7f7;
				color: #333333;
			}
		}

		.msg2 {
			.label {
				width: 120px;
				text-align: left;
			}

			.text {
				width: 240px;
				color: #f14a46;
			}
		}

		padding: 15px 30px;
		height: 160px;
		border-radius: 10px;
		border: 1px dashed transparent;
		box-sizing: border-box;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
	}
}
</style>
